<template>
    <div class="single">
        <!-- 单曲列表 -->
        <table>
            <tr v-for="(item, index) in songs" :key="index">
                <td class="col1">
                    <i class="play" @click="playmusic(index)" v-show="!item.status"></i>
                    <i class="active" v-show="item.status"></i>
                </td>
                <td class="col2">
                    <p class="name ellipsis" :title="item.name" @click="$router.push(`/songlist/${item.id}`)">
                        <span v-html="highlight(item.name)"></span>
                        <em v-for="(item1, index) in item.alias" :key="index">-{{ item1 }}</em>
                    </p>
                    <i class="mv" v-show="item.mvid==0?false:true" @click="$router.push(`/mvlist/${item.mvid}`)"></i>
                </td>
                <td class="col3">
                    <div class="show">
                      <a title="添加到播放列表" class="a1"></a>
                      <a title="收藏" class="a2"></a>
                      <a title="分享" class="a3"></a>
                      <a title="下载" class="a4"></a>
                    </div>
                </td>
                <td class="col4 ellipsis">
                    <a class="artist" v-for="item1 in item.artists" :key="item1.id" :title="item1.name" @click="$router.push(`/artlist/${item1.id}`)"><span v-html="highlight(item1.name)"></span><em>/</em></a>
                </td>
                <td class="col5 ellipsis">
                    <em class="album">《</em>
                    <a class="album" :title="item.album.name" @click="$router.push(`/albumlist/${item.album.id}`)" v-html="highlight(item.album.name)"></a>
                    <em class="album">》</em>
                </td>
                <td class="col6">
                    <div class="time">{{ min(item) }}:{{ sec(item) }}</div>
                </td>
            </tr>
        </table>
        <MusicPlay :ids="ids" :imgUrl="imgUrl" :isPlay="isPlay" />
    </div>
</template>

<script>
import { SingleSearchApi, SongDetailApi } from "@/request/api";
import MusicPlay from "@/components/MusicPlay.vue";
export default {
    data () {
        return {
            songs: [],
            ids: 0,
            imgUrl: "https://img2.baidu.com/it/u=1611088966,2458167776&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500",
            isPlay: false,
            id: 0,
        }
    },
    components: {
        MusicPlay,
    },
    computed: {
        keyword() {
            return this.$route.params.keyword;
        }
    },
    watch: {
        keyword: {
            handler(newValue, oldValue){
                if(newValue !== oldValue){
                    SingleSearchApi(newValue).then((res) => {
                        // console.log(res);
                        this.songs = res.data.result.songs;
                    })
                }
            },
            immediate: true,
        }
    },
    // created() {
    //     SingleSearchApi(this.keyword).then((res) => {
    //         // console.log(res);
    //         this.songs = res.data.result.songs;
    //     })
    // },
    methods: {
        highlight(str) {
          // 正则表达式//中间的字符只是字符串
          // 如果需要动态创建一个正则表达式
          // new RegExp(str, rules) str是正则字符串，rules是匹配模式写在字符串中
          const reg = new RegExp(this.keyword, 'gi')
          const highStr = str.replace(reg, `<span style="color: #0c73c2;">${this.keyword}</span>`)
          return highStr
        },
        min(song) {
          if (parseInt(song.duration / 60000) < 10)
          return "0" + parseInt(song.duration / 60000);
          else return parseInt(song.duration / 60000);
        },
        sec(song) {
          let x = parseInt(song.duration / 60000);
          let y = parseInt(song.duration / 1000 - x * 60);
          if (y < 10) return "0" + y;
          else return y;
        },
        playmusic(index) {
          this.songs.forEach(item=>item.status=0);
          this.songs[index].status = 1;
          this.ids = this.songs[index].id;
          SongDetailApi(this.ids).then((res) => {
            // console.log(res);
            this.imgUrl = res.data.songs[0].al.picUrl;
          })
          this.isPlay = true;
        },
    }
}
</script>
 
<style lang = "less" scoped>
@import "../../assets/base.less";
.single {
    table {
        tr {
            width: 900px;
            height: 20px;
            padding: 10px;
            display: flex;
            align-items: center;
            font-size: 14px;
            &:nth-of-type(even) {
                background: #f7f7f7;
            }
            &:nth-of-type(odd) {
                background: #fff;
            }
            &:hover .show {
                display: block !important;
            }
            &:hover {
                background-color: #f1f1f1;
                border: 1px solid #d3d3d3;
            }
        }
        .col1 {
            width: 17px;
            padding-right: 10px;
            .play {
                width: 17px;
                height: 17px;
                display: inline-block;
                background: url("@/assets/images/public/table.png") no-repeat;
                background-position: 0 -103px;
                &:hover {
                    cursor: pointer;
                    background-position: 0 -128px;
                }
            }
            .active {
                width: 17px;
                height: 17px;
                display: inline-block;
                background: url("../../assets/images/public/table.png") no-repeat -20px -128px;
            }
        }
        .col2 {
            width: 350px;
            display: flex;
            .name {
                width: 320px;
                font-size: 14px;
                // color: #0c73c2;
                &:hover {
                    cursor: pointer;
                    text-decoration: underline;
                }
                span {
                    color: #333;
                }
                em {
                    color: #aeaeae;
                }
            }
            .mv {
                margin: 0 0 0 5px;
                width: 23px;
                height: 17px;
                display: inline-block;
                background: url("@/assets/images/public/table.png") no-repeat 0 -151px;
                &:hover {
                    cursor: pointer;
                    width: 23px;
                    height: 17px;
                    display: block;
                    background: url("@/assets/images/public/table.png") no-repeat -30px -151px;
                }
            }
        }
        .col3 {
            width: 96px;
            .show {
                width: 96px;
                height: 18px;
                display: flex;
                display: none;
                a {
                  margin: 2px 5px 0 0;
                  width: 18px;
                  height: 16px;
                  display: block;
                  float: left;
                  background: url("../../assets/images/public/table.png") no-repeat;
                  &:hover {
                    cursor: pointer;
                  }
                }
                .a1 {
                  width: 13px;
                  height: 13px;
                  margin-top: 2px;
                  background: url("../../assets/images/public/icon.png") no-repeat;
                  background-position: 0 -700px;
                
                  &:hover {
                    background-position: -22px -700px;
                  }
                }
                .a2 {
                  background-position: 0 -174px;
                  &:hover {
                    background-position: -20px -174px;
                  }
                }
                .a3 {
                  background-position: 0 -195px;
                  &:hover {
                    background-position: -20px -195px;
                  }
                }
                .a4 {
                  background-position: -81px -174px;
                  &:hover {
                    background-position: -104px -174px;
                  }
                }
            }
        }
        .col4 {
            width: 160px;
            .artist {
                color: #333;
                &:hover {
                    cursor: pointer;
                    text-decoration: underline;
                }
                em {
                    &:last-child {
                        display: none;
                    }
                }
            }
        }
        .col5 {
            width: 200px;
            padding-right: 20px;
            .album {
                color: #666;
                &:hover {
                    cursor: pointer;
                    text-decoration: underline;
                }
            }
        }
        .col6 {
            width: 64px;
            .time {
                color: #333;
            }
        }
    }
}
</style>